<script lang="ts" setup>
import Login from "@/utils/login";
import mheader from "@/components/header.vue";
import FootMenu from "@/components/FootMenu.vue";
import { Ref, onMounted, ref, computed } from "vue";
import { storeToRefs } from "pinia";
import navTo from "@/utils/navTo";
import { meGetAssetsInfo } from "@/api/games";
import { getItem, setItem } from "@/utils/utils";
import i18n from "@/i18n";
import { afterEach } from "node:test";
import ShareForm from "@/components/ShareForm.vue";
import { showToast, showConfirmDialog } from "vant";
import { signupByWallet, userSignRandom } from "@/api/games";
import { useRoute } from "vue-router";

const route = useRoute();
const shareShow = ref(false);
let userInfo = computed(() =>
  getItem("userInfo") ? JSON.parse(getItem("userInfo")) : null
);
const assetsInfo = ref(null);
window.scrollTo(0, 0);

const getMeGetAssetsInfo = async () => {
  try {
    let res = await meGetAssetsInfo({
      product_type: 4,
    });
    console.log("czRechargeGetChargeWallet:", res.value);
    assetsInfo.value = res.value.data;
  } catch (error) {}
};

const SignupByWallet = async () => {
  try {
    const fpPromise = await import("https://openfpcdn.io/fingerprintjs/v4");
    const xx = await fpPromise.load();
    const yy = await await xx.get();
    console.log("yy", yy.visitorId);
    let uuid = yy.visitorId;
    let params: any = {
      // wallet: "0xeF7493B1C22b87Cc88b00C300552eE3a99686702",
      wallet: "0xa698F1A2873141Ab267EABA884Fa4bF2c97A8d89",
      currency: "CNY",
      client_uid: uuid,
      // invit_code: "pinaszYIKXO7",
    };
    if (route.query.invitCode) {
      params.invit_code = route.query.invitCode;
    }
    let res = await signupByWallet(params);
    console.log("signupByWallet:", res.value);
    setItem("userInfo", JSON.stringify(res.value.data));
    userInfo = getItem("userInfo") ? JSON.parse(getItem("userInfo")) : {};
  } catch (error) {}
};

const UserSignRandom = async () => {
  try {
    const fpPromise = await import("https://openfpcdn.io/fingerprintjs/v4");
    const xx = await fpPromise.load();
    const yy = await await xx.get();
    console.log("yy", yy.visitorId);
    let uuid = yy.visitorId;
    let params: any = {
      currency: "CNY",
      client_uid: uuid,
    };
    if (route.query.invitCode) {
      params.invit_code = route.query.invitCode;
    }
    let res = await userSignRandom(params);
    console.log("signupByWallet:", res.value);
    setItem("userInfo", JSON.stringify(res.value.data));
    userInfo = getItem("userInfo") ? JSON.parse(getItem("userInfo")) : {};
  } catch (error) {}
};

const showLoginDialog = async () => {
  showConfirmDialog({
    title: i18n.global.t("MeT25"),
  })
    .then(() => {
      SignupByWallet();
    })
    .catch(() => {});
};

const openPage = async (page: string) => {
  if (!userInfo) {
    showLoginDialog();
    return;
  }
  if (page == "/withdrawal") {
    // if (!userInfo.email || userInfo.email == "") {
    //   showToast(i18n.global.t("MeT22"));
    //   navTo("/bindemail");
    // } else {
    //   navTo(page, {
    //     balance: assetsInfo.value.balance,
    //   });
    // }
    navTo(page, {
      balance: assetsInfo.value ? assetsInfo.value.balance : 0,
    });
  } else {
    navTo(page);
  }
};

const showShare = () => {
  if (!userInfo) {
    showLoginDialog();
  } else {
    shareShow.value = true;
  }
};

const handleLoginSuccess = () => {
  shareShow.value = false;
};

onMounted(() => {
  userInfo = getItem("userInfo") ? JSON.parse(getItem("userInfo")) : null;
  console.log("userInfo", userInfo);
  if (userInfo) {
    getMeGetAssetsInfo();
  }
});
</script>

<template>
  <div class="me-page">
    <div>
      <mheader />
      <div class="bomMain">
        <div class="box1">
          <div class="box1Title flex items-center">
            {{ i18n.global.t("MeT1") }}
          </div>
          <div class="account flex items-center">
            <div class="accountL">
              <div class="accountLt flex items-center">
                <img src="@/assets/images/usdt.svg" />
                <div>
                  {{ assetsInfo ? assetsInfo.balance : "--" }}
                  <span>USDT</span>
                </div>
              </div>
            </div>
            <div style="flex: 1" />
            <div class="accountR right20" @click="openPage('/recharge')">
              {{ i18n.global.t("MeT2") }}
            </div>
            <div class="accountR" @click="openPage('/withdrawal')">
              {{ i18n.global.t("MeT3") }}
            </div>
          </div>
          <div class="flexWrap">
            <div class="flexitem">
              <div class="txtT">
                {{ assetsInfo ? assetsInfo.total_join : "--" }}
              </div>
              <div class="txtB">{{ i18n.global.t("MeT4") }}</div>
            </div>
            <div class="line" />
            <div class="flexitem">
              <div class="txtT">
                {{ assetsInfo ? assetsInfo.total_profit : "--" }}
              </div>
              <div class="txtB">{{ i18n.global.t("MeT5") }}</div>
            </div>
            <div class="line" />
            <div class="flexitem">
              <div class="txtT">
                {{ assetsInfo ? assetsInfo.fs_reward : "--" }}
              </div>
              <div class="txtB">{{ i18n.global.t("MeT14") }}</div>
            </div>
            <div class="line" />
            <div class="flexitem">
              <div class="txtT">
                {{ assetsInfo ? assetsInfo.team_reward : "--" }}
              </div>
              <div class="txtB">{{ i18n.global.t("MeT15") }}</div>
            </div>
          </div>
        </div>
        <div class="cellWrap">
          <div class="vCell" @click="openPage('/mybet')">
            {{ i18n.global.t("MeT6") }}
            <div style="flex: 1" />
            <img src="@/assets/images/arrow-right.png" class="icon" />
          </div>
          <div class="vCell" @click="openPage('/myteam')">
            {{ i18n.global.t("MeT16") }}
            <div style="flex: 1" />
            <img src="@/assets/images/arrow-right.png" class="icon" />
          </div>
          <div class="vCell" @click="showShare">
            {{ i18n.global.t("MeT23") }}
            <div style="flex: 1" />
            <img src="@/assets/images/arrow-right.png" class="icon" />
          </div>
          <!-- <div
            v-if="!userInfo || !userInfo.email || userInfo.email == ''"
            class="vCell"
            @click="navTo('/bindemail')"
          >
            {{ i18n.global.t("MeT7") }}
            <div style="flex: 1" />
            <img src="@/assets/images/arrow-right.png" class="icon" />
          </div>
          <div
            v-if="userInfo && userInfo.email && userInfo.email != ''"
            class="vCell"
          >
            {{ i18n.global.t("MeT12") }}
            <div style="flex: 1" />
            {{ userInfo.email }}
          </div> -->
          <div class="vCell" @click="navTo('/kf')">
            {{ i18n.global.t("MeT8") }}
            <div style="flex: 1" />
            <img src="@/assets/images/arrow-right.png" class="icon" />
          </div>
          <!-- <div class="vCell">
            {{ i18n.global.t("MeT9") }}
            <div style="flex: 1" />
            <img src="@/assets/images/arrow-right.png" class="icon" />
          </div> -->
        </div>
      </div>
      <FootMenu :value="'me'" />
    </div>
    <ShareForm
      v-model:visible="shareShow"
      @success="handleLoginSuccess"
      @cancel="handleLoginSuccess"
    />
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";

.me-page {
  min-height: 100vh;
  margin: 0 auto;
  width: 750 * $_ru;
  flex-direction: column;
  background: #1a2c38;
  .bomMain {
    margin-top: 32 * $_ru;
    flex: 1;
    margin: 30 * $_ru 20 * $_ru 120 * $_ru 20 * $_ru;
    .t30 {
      margin-top: 20 * $_ru;
    }
    .cellWrap {
      margin-top: 20 * $_ru;
      border-radius: 6px;
      overflow: hidden;
      background: #0f212e;
      .vCell {
        display: flex;
        align-items: center;
        margin: 0 30 * $_ru;
        padding: 30 * $_ru 0;
        font-size: 26 * $_ru;
        color: #fff;
        border-bottom: 1 * $_ru solid #1a2c38;
        .icon {
          width: 28 * $_ru;
          height: 28 * $_ru;
        }
      }
    }

    .box1 {
      padding: 40 * $_ru;
      background: #0f212e;
      border-radius: 12 * $_ru;
      .h30 {
        height: 30 * $_ru;
      }
      .flexWrap {
        display: flex;
        flex-direction: row;
        padding: 60 * $_ru 0 30 * $_ru 0;
        align-items: center;
        justify-content: center;
        .flexitem {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .txtT {
            font-size: 26 * $_ru;
            color: #fff;
            font-weight: 600;
          }
          .txtB {
            font-size: 24 * $_ru;
            color: #fff;
            margin-top: 10 * $_ru;
          }
        }
        .line {
          width: 2 * $_ru;
          height: 30 * $_ru;
          background: #fff;
        }
      }

      .box1Title {
        font-family: PingFang SC;
        font-size: 28 * $_ru;
        font-weight: 500;
        color: #fff;
        .more {
          font-size: 24 * $_ru;
          color: #b1bad3;
        }

        > img {
          width: 40 * $_ru;
          height: 40 * $_ru;
          margin-left: 8 * $_ru;
        }
      }

      .account {
        margin-top: 40 * $_ru;

        .accountL {
          .accountLt {
            > img {
              width: 48 * $_ru;
              height: 48 * $_ru;
              margin-right: 16 * $_ru;
            }

            font-family: Mont;
            font-size: 40 * $_ru;
            font-weight: 700;
            color: #fff;

            > div {
              > span {
                font-family: Mont;
                font-size: 28 * $_ru;
                font-weight: 600;
                color: #fff;
                margin-left: 8 * $_ru;
              }
            }
          }
        }
        .right20 {
          margin-right: 20 * $_ru;
        }
        .accountR {
          padding: 15 * $_ru 40 * $_ru;
          border-radius: 40 * $_ru;
          background: #1a2c38;
          font-family: PingFang SC;
          font-size: 24 * $_ru;
          color: #fff;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
